<template>
  <div class="detailIndex">
    <div class="titleBar">
      <div class="backIcon" @click="back">
        <svg t="1593162984672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1917" width="220" height="220"><path d="M663.466667 889.6l-362.666667-362.666667c-8.533333-8.533333-8.533333-21.333333 0-29.866666l362.666667-362.666667c8.533333-8.533333 21.333333-8.533333 29.866666 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866666L422.4 497.066667c-8.533333 8.533333-8.533333 21.333333 0 29.866666l300.8 300.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 10.666667-21.333333 10.666667-29.866666 2.133333z" fill="#000000" p-id="1918"></path></svg>
      </div>
      <div class="title">
        颜值明细
      </div>
      <div>
        &nbsp;&nbsp;
      </div>
    </div>
    <div class="wrapper">
      <div class="tabTitle">
        <div v-for="(item, ind) in items" :key="item.value" @click="selectThis(ind)" class="item"><span :class="{'current': curr === ind}">{{item.key}}</span></div>
      </div>
      <div v-show="curr === 0" class="tabContent" ref="tabContent1">
        <div class="recordList">
          <div class="noMore pullingDown">
            <p v-show="!requestRunning">下拉刷新</p>
            <p v-show="requestRunning">刷新中...</p>
          </div>
          <div class="record" v-for="(n, i) in YanZhiGetList" :key="i">
            <div class="_left">
              <div class="name">{{n.desp}}</div>
              <p>{{n.time | timeFilter}}</p>
            </div>
            <div class="_right"><span>{{n.value}}</span></div>
          </div>
          <div class="noMore">
            <p v-show="noMore1">没有更多数据啦</p>
            <p v-show="requestRunning">加载中...</p>
          </div>
          <div class="noData" v-show="YanZhiGetListNoData">
            <img src="../../assets/images/nodata.png" alt="">
            <p>暂无颜值明细哦</p>
          </div>
        </div>
      </div>
      <div v-show="curr === 1" class="tabContent tabContent2">
        <div class="recordList">
          <div class="noMore pullingDown">
            <p v-show="!requestRunning">下拉刷新</p>
            <p v-show="requestRunning">刷新中...</p>
          </div>
          <div class="record" v-for="n in YanZhiExchangeList" :key="n.time">
            <div class="_left">
              <div class="name">{{n.desp}}</div>
              <p>{{n.time | timeFilter}}</p>
            </div>
            <div class="_right"><span>{{n.value}}</span></div>
          </div>
          <div class="noMore">
            <p v-show="noMore2">没有更多数据啦</p>
            <p v-show="requestRunning">加载中...</p>
          </div>
          <div class="noData" v-show="YanZhiExchangeListNoData">
            <img src="../../assets/images/nodata.png" alt="">
            <p>暂无兑换记录哦</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullUp)
BScroll.use(PullDown)
export default {
  data() {
    return {
      items: [{key: '颜值明细', value: '1'}, {key: '兑换记录', value: '2'}],
      curr: 0,
      page1: 1,
      page2: 1,
      offset: 10,
      YanZhiGetList: [],
      YanZhiExchangeList: [],
      YanZhiGetListNoData: false,
      YanZhiExchangeListNoData: false,
      noMore1: false,
      noMore2: false,
      scroll1: null,
      scroll2: null,
      requestRunning: false,
      token: ''
    };
  },
  async mounted () {
    this.token = sessionStorage.getItem('token')
    await this.getYanZhiList()
    this.$nextTick(() => {
      this.BScroll1Init()
      this.BScroll2Init()
    })
  },
  watch: {
    YanZhiGetList () {
      console.log(this)
      this.scroll1 ? this.scroll1.refresh() : ''
    }
  },
  filters: {
    timeFilter (val) {
      if (val) {
        return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return '-'
      }
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    selectThis (i) {
      this.curr = i
      // this.noMore = false
      this.YanZhiGetListNoData = false
      this.YanZhiExchangeListNoData = false
      switch (i) {
        case 0:
          console.log(this.scroll1)
          if (this.YanZhiGetList.length === 0) {
            this.getYanZhiList()
          }
          break
        case 1:
          if (this.YanZhiExchangeList.length === 0) {
            this.getYanZhiExchangeList()
          }
          break
      }
    },
    async getYanZhiList (callback) {
      this.requestRunning = true
      await this.$axios.get("https://kotest.bojem.com/user/yanzhiLog", {
        params: {
          start: (this.page1 - 1) * this.offset,
          offset: this.offset,
          token: this.token
        }
      })
      .then(res => {
        this.requestRunning = false
        console.log(res)
        if (res.status === 200) {
          if (res.data.code === '0000') {
            if (res.data.data.length === 0) {
              if (this.YanZhiGetList.length === 0) {
                // 没有数据
                this.YanZhiGetListNoData = true
              } else {
                // 没有更多数据
                this.noMore1 = true
              }
            } else if (res.data.data.length < this.offset) {
              // 没有更多数据
              this.noMore1 = true
            }
            if (callback) {
              callback()
            }
            this.YanZhiGetList = this.YanZhiGetList.concat(res.data.data)
            if (this.scroll1) {
              console.log(this.scroll1)
              setTimeout(() => {
                this.scroll1.finishPullUp()
                this.scroll1.refresh()
              }, 300)
            }
          } else {
            if (res.data.msg) {
              throw new Error(res.data.msg)
            } else {
              throw new Error('请求异常')
            }
          }
        } else {
          throw new Error('网络错误')
        }
      })
      .catch((error) => {
        this.requestRunning = false
        this.$toastMessage({message: error.message})
      });
    },
    async getYanZhiExchangeList (callback) {
      this.requestRunning = true
      await this.$axios
      .get("https://kotest.bojem.com/user/exchangeLog", {
        params: {
          start: (this.page2 - 1) * this.offset,
          offset: this.offset,
          token: this.token
        }
      })
      .then(res => {
        this.requestRunning = false
        console.log(res)
        if (res.status === 200) {
          if (res.data.code === '0000') {
            if (res.data.data.length === 0) {
              if (this.YanZhiExchangeList.length === 0) {
                // 没有数据
                this.YanZhiExchangeListNoData = true
              } else {
                // 没有更多数据
                this.noMore2 = true
              }
            } else if (res.data.data.length < this.offset) {
              // 没有更多数据
              this.noMore2 = true
            }
            if (callback) {
              callback()
            }
            this.YanZhiExchangeList = this.YanZhiExchangeList.concat(res.data.data)
            if (this.scroll2) {
              console.log(this.scroll2)
              setTimeout(() => {
                this.scroll2.finishPullUp()
                this.scroll2.refresh()
              }, 300)
            }
          } else {
            if (res.data.msg) {
              throw new Error(res.data.msg)
            } else {
              throw new Error('请求异常')
            }
          }
        } else {
          throw new Error('网络错误')
        }
      })
      .catch((error) => {
        this.requestRunning = false
        this.$toastMessage({message: error.message})
      });
    },
    BScroll1Init () {
      this.scroll1 = new BScroll(this.$refs.tabContent1, {
        scrollY: true,
        scrollX: false,
        // bounce: false,
        probeType: 3,
        pullUpLoad: true,
        pullDownRefresh: {
          threshold: 100
        }
      })
      this.scroll1.on('pullingUp', () => {
        if (!this.noMore1) {
          if (!this.requestRunning) {
            this.page1 ++
            this.getYanZhiList()
          }
        } else {
          this.noMore1 = true
        }
      })
      this.scroll1.on('pullingDown', () => {
        this.page1 = 1
        this.noMore1 = false
        this.getYanZhiList(() => {
          this.YanZhiGetList = []
          this.scroll1.finishPullDown()
        })
      })
    },
    BScroll2Init () {
      if (!this.scroll2) {
        let wrapper = document.querySelector('.tabContent2')
        this.scroll2 = new BScroll(wrapper, {
          scrollY: true,
          scrollX: false,
          probeType: 3,
          pullUpLoad: true,
          pullDownRefresh: {
            threshold: 100
          }
        })
        this.scroll2.on('pullingUp', () => {
          if (!this.noMore2) {
            if (!this.requestRunning) {
              this.page2 ++
              this.getYanZhiExchangeList()
            }
          } else {
            this.noMore2 = true
          }
        })
        this.scroll2.on('pullingDown', () => {
          this.page2 = 1
          this.noMore2 = false
          this.getYanZhiExchangeList(() => {
            this.YanZhiExchangeList = []
            this.scroll2.finishPullDown()
          })
        })
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
  p{
    margin 0
  }
  .detailIndex
    background #f5f5f5
    overflow hidden
    height calc(100vh - 44px)
    height calc(100vh - env(safe-area-inset-top))
    height calc(100vh - constant(safe-area-inset-top))
    padding-top  constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    padding-top: env(safe-area-inset-top);
    .titleBar{
      height 0.9rem
      background #ffffff
      border-bottom 1px solid #F5F5F5
      padding 0 0.3rem 0
      padding-top 44px
      padding-top  constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
      padding-top: env(safe-area-inset-top);
      position relative
      display flex
      justify-content space-between
      align-items center

      .backIcon{
        position absolute
        left 0.3rem
        top calc(50% + 44px / 2)
        top calc(50% + env(safe-area-inset-top) / 2)
        transform translateY(-50%)
        width 0.5rem
        z-index 2
        display flex
        svg{
          width 0.5rem
          height 0.4rem
        }
      }
      .title{
        flex 1
        text-align center
        font-size 0.36rem
        color #000
        user-select:none;
      }
      .rightOption{
        font-size 0.26rem;
        color #999999
      }
    }
    .wrapper
      margin-top 0.2rem
      height calc(100vh - 0.2rem)
      background #fff
      display flex
      flex-direction column

      .tabTitle
        width 100%
        height 1rem
        text-align center
        line-height 1rem
        display flex
        border-bottom 1px solid #EEEEEE
        
        .item 
          flex 1
          display flex
          align-items center
          justify-content center
          span  
            font-size 0.3rem
            color #999
            line-height 1rem
            margin-bottom -2px

          .current
            color #7B2C3F
            border-bottom 2px solid #7B2C3F
      .tabContent
        width 100%
        flex 1
        overflow hidden

        .recordList
          min-height 100vh
          padding 0.1rem 0.3rem calc(1rem + 50px)
          padding 0.1rem 0.3rem calc(1rem + constant(safe-area-inset-top))
          padding 0.1rem 0.3rem calc(1rem + env(safe-area-inset-top))
          position relative
          .record
            min-height 1.5rem
            display flex
            justify-content space-between
            align-items center
            border-bottom 1px solid #EEEEEE

            ._left
              >div
                font-size 0.28rem
                color #383838
                margin-bottom 0.06rem
              p
                font-size 0.24rem
                color #C9C9C9

            ._right
              display flex
              span 
                font-size 0.32rem
                color #7B2C3F
          .noMore 
            font-size: 0.28rem;
            color: #999999;
            width: 5.6rem;
            height 1rem;
            line-height: 1rem;
            margin: 0 auto;
            text-align: center;
          .noData {
            width: 100%;
            height: 100%;

            img {
              display: block;
              width: 2.26rem;
              height: 1.47rem;
              margin: 3.6rem auto 0.54rem;
            }
            > p {
              font-size: 0.28rem;
              color: #999999;
              width: 5.6rem;
              margin: 0 auto;
              text-align: center;
            }
          }
          .pullingDown{
            position absolute;
            top: -1rem
            left 0
            right 0
            margin auto
          }
</style>
